<template>
  <div class="recycling-detail" v-loading="loading">
    <div class="breakdown-singal">
      <BasicTitle :title="t('custom.故障信号')"></BasicTitle>
      <el-row :gutter="20">
        <el-col
          :xs="12"
          :sm="8"
          :md="6"
          :lg="6"
          :xl="4"
          v-for="(item, index) in breakdownList"
          :key="index"
        >
          <div class="card-item">
            <span>{{ item.name }}</span>
            <img :src="handleColor(item.code)" alt="" />
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="machine-singal">
      <BasicTitle :title="t('custom.机台信号')"></BasicTitle>
      <el-row :gutter="20">
        <el-col
          class="custom-col"
          :xs="12"
          :sm="8"
          :md="8"
          :lg="6"
          v-for="(item, index) in machineList"
          :key="index"
        >
          <div class="machine-item">
            <div class="left-index">
              <span>{{ t('custom.机台') }}</span>
              <span>{{ item.name }}</span>
            </div>
            <div class="right-singal">
              <div class="right-item headstock">
                <img :src="handleColor(item.touBu)" alt="" />
                <span>{{ t('custom.车头阀') }}</span>
              </div>
              <el-divider direction="vertical" />
              <div class="right-item rear">
                <img :src="handleColor(item.weiBu)" alt="" />
                <span>{{ t('custom.车尾阀') }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup lang="ts">
  import normal from '@/assets/images/device-monitor/normal.png'
  import breakdown from '@/assets/images/device-monitor/breakdown.png'
  import { getBanBenHaoHuoQuShuJu, postShiSiXinXinList_qingHua } from '@/api/shengChanJianShi'
  const props = defineProps<{
    versionId: string
    id: string
  }>()

  const { t } = useI18n()
  const loading = ref(false)
  const breakArr = ref<any>([])
  const breakdownList = ref<any>([])
  const machineList = ref<any>([])

  const handleColor = (code) => {
    let item = breakArr.value.find((value) => {
      return value == code
    })
    if (item != undefined) {
      return breakdown
    } else {
      return normal // normal
    }
  }

  const getCardList = () => {
    getBanBenHaoHuoQuShuJu(props.versionId)
      .then((res: any) => {
        loading.value = false
        breakdownList.value = res.filter((value) => {
          return value.code.indexOf('N') != -1
        })
        let jiTouArr = res.filter((value) => {
          return value.code.indexOf('SGXSA') != -1
        })
        let jiWeiArr = res.filter((value) => {
          return value.code.indexOf('SGXSF') != -1
        })
        jiTouArr.forEach((value) => {
          let jitai = value.code.slice(-2)
          let weiBu = jiWeiArr.find((value1) => {
            return value1.code.slice(-2) == jitai
          })
          let item = {
            name: jitai,
            touBu: value.code,
            weiBu: weiBu.code
          }
          machineList.value.push(item)
        })
      })
      .catch(() => {
        loading.value = false
      })
  }

  const getRealTimeInfo = () => {
    loading.value = true
    postShiSiXinXinList_qingHua([props.id])
      .then((res: any) => {
        getCardList()
        if (res[0].machineRealInfo !== null) {
          if ('warning' in res[0].machineRealInfo) {
            for (let resKey in res[0].machineRealInfo.warning) {
              breakArr.value.push(resKey)
            }
          }
        }
      })
      .catch(() => {
        loading.value = false
      })
  }

  onMounted(() => {
    getRealTimeInfo()
  })
</script>
<style scoped lang="scss">
  .basic-title {
    margin-bottom: 20px;
  }

  img {
    width: 48px;
    height: 48px;
  }

  .card-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    line-height: 80px;
    padding: 16px 32px 16px 26px;
    // margin: 0 20px 20px 0;
    margin-bottom: 20px;
    font-size: 16px;
    color: #202121;
    border-radius: 8px;
    background-color: #fff;
    box-sizing: border-box;
  }

  .machine-item {
    display: flex;
    height: 134px;
    margin-bottom: 20px;
    background-color: #fff;

    .left-index {
      display: flex;
      width: 60px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #e0e0e0;
      color: rgba(0, 0, 0, 0.9);

      span:first-child {
        font-size: 14px;
        margin-bottom: 10px;
      }
      span:last-child {
        font-size: 24px;
        line-height: 24px;
        font-weight: bold;
      }
    }

    .right-singal {
      display: flex;
      flex: 1;
      flex-direction: row;
      padding: 25px 0;

      .right-item {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        span {
          font-size: 16px;
          color: #202121;
          margin-top: 14px;
        }
      }

      .el-divider {
        height: 100%;
      }
    }
  }

  @media only screen and (min-width: 1920px) {
    .custom-col {
      flex: 0 0 20%;
      max-width: 20%;
    }
  }
</style>
